<template>
  <div>
    <el-form label-width="80px">

      <el-form-item label="名称">
        <el-input v-model="name" style="width: 200px; float: left"></el-input>

        <el-button type="primary" @click="onSubmit" style="float: left">查询</el-button>

        <el-button type="primary" @click="editMember" style="float: left">添加</el-button>
      </el-form-item>


    </el-form>

    <br>
    <!--    表格-->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange">
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        prop="id"
        label="货物类型编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="货物类型名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="defaultWeight"
        label="默认重量(千克)"
        width="180">
      </el-table-column>
      <el-table-column
        prop="defaultVolume"
        label="默认体积(方)"
        width="180">
      </el-table-column>
      <el-table-column
        prop="remark"
        label="说明"
        width="180">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteRow(scope.row.id)" type="text" size="small">删除</el-button>
          <el-button @click="updataRow(scope.row.id)" type="text" size="small">修改</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <el-pagination
        :background="true"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageInfo.pageSize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="pageInfo.total">
      </el-pagination>
    </div>

    <!--    添加-->
    <el-dialog title="添加" :visible.sync="editMemberVisible" :close-on-click-modal="false">

      <el-form :model="editform" label-width="80px">

        <el-row :gutter="20">
          <el-form-item class="el-col-18" label="货品类型名称" :label-width="formLabelWidth">
            <el-input v-model="editform.name" autocomplete="off"></el-input>
          </el-form-item>


          <el-form-item class="el-col-xl-18" label="运输车型" :label-width="formLabelWidth">
          <el-select v-model="editform.trunckTypes" multiple placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
          </el-form-item>


          <el-form-item class="el-col-18" label="默认重量 (千克)" :label-width="formLabelWidth">
            <el-input v-model="editform.defaultWeight" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="el-col-18" label="默认体积 (方)" :label-width="formLabelWidth">
            <el-input v-model="editform.defaultVolume" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="el-col-18" label="说明" :label-width="formLabelWidth">
            <el-input v-model="editform.remark" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="el-col-18" label="状态" :label-width="formLabelWidth">
            <el-radio v-model="editform.status" label="1">启用</el-radio>
            <el-radio v-model="editform.status" label="0">禁止</el-radio>
          </el-form-item>
        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addExercise">保存</el-button>
        <el-button @click="editMemberVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!--    修改-->
    <el-dialog title="修改" :visible.sync="updataeditMemberVisible" :close-on-click-modal="false" label-width="80px">

      <el-form :model="updataeditform">
        <el-row :gutter="20">

          <el-form-item class="el-col-18" label="货品类型名称" :label-width="formLabelWidth">
            <el-input v-model="updataeditform.name" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="el-col-xl-18" label="运输车型" :label-width="formLabelWidth">
            <el-select v-model="updataeditform.trunckTypes" multiple placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item class="el-col-18" label="默认重量 (千克)" :label-width="formLabelWidth">
            <el-input v-model="updataeditform.defaultWeight" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="el-col-18" label="默认体积 (方)" :label-width="formLabelWidth">
            <el-input v-model="updataeditform.defaultVolume" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item class="el-col-18" label="说明" :label-width="formLabelWidth">
            <el-input v-model="updataeditform.remark" autocomplete="off"></el-input>
          </el-form-item>


<!--          <el-form-item class="el-col-18" label="状态" :label-width="formLabelWidth">-->
<!--            <el-radio v-model="editform.status" label="1">启用</el-radio>-->
<!--            <el-radio v-model="editform.status" label="0">禁止</el-radio>-->
<!--          </el-form-item>-->
        </el-row>


      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="updataExercise">保存</el-button>
        <el-button @click="updataeditMemberVisible = false">取消</el-button>
      </div>
    </el-dialog>


  </div>
</template>

<script>


export default {


  data() {
    return {
      name: '',
      tableData: [],
      multipleSelection: [],
      editMemberVisible: false,
      updataeditMemberVisible: false,
      formLabelWidth: '180px',
      options: [],
      pageInfo: {
        query: '',
        pageNum: 1,
        pageSize: 5,
        total:0,
      },

      editform: {
        name: "",
        defaultWeight: "",
        defaultVolume: "",
        remark: "",
        status: "",
        trunckTypes:[]
      },
      updataeditform: {
        id:"",
        name: "",
        defaultWeight: "",
        defaultVolume: "",
        remark: "",
        status: "",
        trunckTypes:[]

      }
    }
  },

  methods: {

    editMember() {
      this.editMemberVisible = true;
      this.$http({
        url: this.$http.adornUrl("/base/trucktype/findtrucktypeAll"),
        method: 'get',
        data: this.$http.adornData(),
      }).then(result => {
        console.log(result.data)
        this.options = result.data
      })
    },

    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.pageInfo.pageSize = newSize;
      this.onSubmit()
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.pageInfo.pageNum = newPage;
      this.onSubmit()
    },


    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onSubmit() {

      let param = {
        "pageNum": this.pageInfo.pageNum,
        "pagesize": this.pageInfo.pageSize,
        "name": this.name
      }
      this.$http({
        url: this.$http.adornUrl("/base/goodstype/querygoodstypefy"),
        method: "get",
        params: this.$http.adornParams(param),
      }).then(res => {
        this.pageInfo.total = res.data.total;
        this.tableData = res.data.rows
      })
    },

    //删除弹框
    deleteRow(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'

      }).then(() => {
        this.deleteMen(id);

      })
    },
    //删除
    deleteMen(id) {
      this.$http({
        url: this.$http.adornUrl(`/base/goodstype/delectgoodtypebyid/${id}`),
        method: 'delete',
        params: this.$http.adornParams()
      }).then(() => {
        this.onSubmit()
      })

    },

    //添加
    addExercise() {
      let param = {
        'name': this.editform.name,
        'defaultWeight': this.editform.defaultWeight,
        'defaultVolume': this.editform.defaultVolume,
        'remark': this.editform.remark,
        'status': this.editform.status,
        "option": this.editform.option,
        "trunckTypes":this.editform.trunckTypes
      }

      this.$http({
        url: this.$http.adornUrl("/base/goodstype/saveGoodsType"),
        method: 'post',
        data: this.$http.adornData(param),
      }).then(() => {
        this.onSubmit()
        this.editMemberVisible = false
        this.editform = this.$options.data().editform;
      })


    },


    //修改，根据id查询
    updataRow(id) {
      this.updataeditMemberVisible=true
      this.$http({
        url: this.$http.adornUrl("/base/trucktype/findtrucktypeAll"),
        method: 'get',
        data: this.$http.adornData(),
      }).then(result => {
        console.log(result.data)
        this.options = result.data
      })

      this.$http({
        url: this.$http.adornUrl(`/base/goodstype/findgoodstypeById/${id}` ),
        methods: 'get',
        data: this.$http.adornParams(),
      }).then(res =>{
          this.updataeditform.id=res.data.id;
          this.updataeditform.name = res.data.name;
          this.updataeditform.defaultWeight = res.data.defaultWeight;
          this.updataeditform.defaultVolume = res.data.defaultVolume;
          this.updataeditform.remark = res.data.remark;
          this.updataeditform.status=res.data.status;
          this.updataeditform.option=res.data.options;
          this.updataeditform.trunckTypes=res.data.trunckTypes;
      })

    },


    updataExercise() {
      console.log("进来")
      let param = {
        'id':this.updataeditform.id,
        'name': this.updataeditform.name,
        'defaultWeight': this.updataeditform.defaultWeight,
        'defaultVolume': this.updataeditform.defaultVolume,
        'remark': this.updataeditform.remark,
        'status': this.updataeditform.status,
        "option": this.updataeditform.option,
        "trunckTypes":this.updataeditform.trunckTypes
      }
      console.log(this.updataeditform.id)

      this.$http({
        url: this.$http.adornUrl("/base/goodstype/updategoodstypeById"),
        method: 'put',
        data: this.$http.adornData(param),
      }).then(() => {
        this.onSubmit()
        this.updataeditMemberVisible = false
      })
     }
  },
  //查询，调用查询方法进来就有数据
  mounted() {
    this.onSubmit()
  },

}
</script>

<style scoped>

</style>
